<template>
  <div class="container max-w-6xl p-4 bg-white bg-opacity-60 my-4 rounded-lg backdrop-blur-md">
    <Carousel :value="works?.imgs" :autoplayInterval="5000">
      <template #item="item">
        <div class="flex justify-center">
          <img :src="item.data.link" class="max-h-[512px]" />
        </div>
      </template>
    </Carousel>

    <div class="flex flex-col space-y-2">
      <router-link :to="'/designer/' + works?.fdid" class="flex items-end">
        <img
          :src="user?.avatar + '/thumb'"
          alt="头像"
          height="48"
          width="48"
          class="rounded-full mr-2"
        />
        <span class="text-2xl">{{ designer?.name }}</span>
      </router-link>
      <div>
        <h3 class="text-xl text-indigo-600 font-bold">简介</h3>
        <div class="text-lg" v-html="works?.description"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DesignerDesignWorks'
})
</script>

<script lang="ts" setup>
import { defineComponent, ref } from 'vue'
import { getWorks, getDesignerInfo } from '@/api/designer/designer'
import { getUserInfo } from '@/api/user/user'
import { useToast } from 'primevue/usetoast'
import { useStore } from 'vuex'

import Carousel from 'primevue/carousel'

const props = defineProps<{ id: string }>()

let toast = useToast()
const store = useStore()

const works = ref<DesignWorks>()
const designer = ref<Designer>()
const user = ref<LoginUser>()

function _getWorks(id: string) {
  getWorks(id)
    .then(res => {
      works.value = res.data
      getDesignerInfo(works.value?.fdid as number)
        .then(res => {
          designer.value = res.data
          getUserInfo(designer.value?.uid as number)
            .then(res => {
              user.value = res.data
            })
        })
    })
    .catch(err => {
      toast.add({
        severity: 'error',
        summary: '获取作品信息失败',
        detail: err.data.msg,
      })
    })
}

_getWorks(props.id)
</script>